<template>
  <div class="ai-service-container">
    <div class="chat-header">
      <h2>AI智能客服</h2>
      <p>为您提供24小时在线服务</p>
    </div>
    
    <div class="chat-messages" ref="messagesContainer">
      <div 
        v-for="message in messages" 
        :key="message.id"
        :class="['message', message.type]"
      >
        <div class="message-content">
          <div class="message-avatar">
            <el-icon v-if="message.type === 'ai'"><Service /></el-icon>
            <el-icon v-else><User /></el-icon>
          </div>
          <div class="message-text">
            {{ message.text }}
          </div>
        </div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>
    
    <div class="chat-input">
      <el-input
        v-model="inputMessage"
        placeholder="请输入您的问题..."
        @keyup.enter="sendMessage"
        :disabled="loading"
      >
        <template #append>
          <el-button 
            type="primary" 
            @click="sendMessage"
            :loading="loading"
            :disabled="!inputMessage.trim()"
          >
            发送
          </el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import { Service, User } from '@element-plus/icons-vue'

const messagesContainer = ref()
const inputMessage = ref('')
const loading = ref(false)

const messages = ref([
  {
    id: 1,
    type: 'ai',
    text: '您好！我是AI智能客服助手，很高兴为您服务。请问有什么可以帮助您的吗？',
    time: '14:30'
  }
])

const sendMessage = async () => {
  if (!inputMessage.value.trim() || loading.value) return
  
  // 添加用户消息
  const userMessage = {
    id: Date.now(),
    type: 'user',
    text: inputMessage.value,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  messages.value.push(userMessage)
  
  const userInput = inputMessage.value
  inputMessage.value = ''
  loading.value = true
  
  // 模拟AI回复
  setTimeout(() => {
    const aiResponses = [
      '我理解您的问题，让我为您详细解答...',
      '这是一个很好的问题，根据我的了解...',
      '感谢您的咨询，我建议您可以...',
      '我明白您的需求，让我为您提供解决方案...'
    ]
    
    const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]
    
    const aiMessage = {
      id: Date.now() + 1,
      type: 'ai',
      text: randomResponse,
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    }
    messages.value.push(aiMessage)
    loading.value = false
    
    // 滚动到底部
    nextTick(() => {
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      }
    })
  }, 1000)
}

onMounted(() => {
  // 滚动到底部
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
})
</script>

<style scoped>
.ai-service-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  padding: 0;
}

.chat-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #eee;
}

.chat-header h2 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
}

.chat-header p {
  margin: 0;
  color: #666;
  font-size: 0.95em;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message.user {
  align-items: flex-end;
}

.message.ai {
  align-items: flex-start;
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 80%;
}

.message.user .message-content {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: #67C23A;
}

.message-text {
  background: #f4f4f5;
  padding: 12px 16px;
  border-radius: 12px;
  color: #333;
  font-size: 0.95em;
  line-height: 1.4;
  word-break: break-word;
}

.message.user .message-text {
  background: #409EFF;
  color: white;
}

.message-time {
  font-size: 0.8em;
  color: #999;
  padding: 0 8px;
}

.chat-input {
  padding: 16px 0 0 0;
  border-top: 1px solid #eee;
}

.chat-input .el-input-group__append {
  padding: 0;
}

.chat-input .el-button {
  border-radius: 0 4px 4px 0;
  height: 40px;
}

/* 移动端优化 */
@media (max-width: 600px) {
  .ai-service-container {
    height: calc(100vh - 120px);
  }
  
  .chat-header {
    margin-bottom: 16px;
    padding: 0 0 12px 0;
  }
  
  .chat-header h2 {
    font-size: 1.3em;
  }
  
  .chat-header p {
    font-size: 0.9em;
  }
  
  .chat-messages {
    gap: 12px;
    padding: 0 0 12px 0;
  }
  
  .message-content {
    max-width: 85%;
    gap: 6px;
  }
  
  .message-avatar {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .message-text {
    padding: 10px 14px;
    font-size: 0.9em;
  }
  
  .message-time {
    font-size: 0.75em;
    padding: 0 6px;
  }
  
  .chat-input {
    padding: 12px 0 0 0;
  }
  
  .chat-input .el-button {
    height: 36px;
  }
}

@media (max-width: 375px) {
  .ai-service-container {
    height: calc(100vh - 110px);
  }
  
  .chat-header {
    margin-bottom: 12px;
    padding: 0 0 10px 0;
  }
  
  .chat-header h2 {
    font-size: 1.2em;
  }
  
  .chat-header p {
    font-size: 0.85em;
  }
  
  .chat-messages {
    gap: 10px;
    padding: 0 0 10px 0;
  }
  
  .message-content {
    max-width: 90%;
    gap: 4px;
  }
  
  .message-avatar {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .message-text {
    padding: 8px 12px;
    font-size: 0.85em;
  }
  
  .message-time {
    font-size: 0.7em;
    padding: 0 4px;
  }
  
  .chat-input {
    padding: 10px 0 0 0;
  }
  
  .chat-input .el-button {
    height: 32px;
  }
}
</style> 